<form class="options composerEncrypt-container pm_form pm_grid" name="encryptForm">
    <header class="composerEncrypt-header">
        <h3 translate translate-context="Title">Encrypt for non-ProtonMail users</h3>
        <a href="https://protonmail.com/support/knowledge-base/encrypt-for-outside-users/" target="_blank">
            <i class="fa fa-info-circle"></i>
        </a>
    </header>
    <div class="alert">
        <div ng-class="{'has-error': encryptForm.outsidePw.$touched && encryptForm.outsidePw.$error.required}" class="clearfix">
            <label
                for="outsidePw"
                class="text-muted col-1-3" translate translate-context="Title">Message Password</label>
            <div class="col-2-3">
                <input style="display: none;" type="password" name="foilautofill"/>
                <input
                    type="password"
                    autocomplete="off"
                    name="outsidePw"
                    id="outsidePw"
                    ng-model="model.password"
                    placeholder-translate-context="Placeholder"
                    placeholder-translate="Password"
                    class="composer-options-input"
                    required>
            </div>
        </div>
        <div ng-class="{'has-error': encryptForm.outsidePwConfirm.$touched && encryptForm.outsidePwConfirm.$error.required}" class="clearfix">
            <label
                for="outsidePwConfirm"
                class="text-muted col-1-3" translate translate-context="Title">Confirm Password</label>
            <div class="col-2-3">
                <input style="display: none;" type="password" name="foilautofill">
                <input
                    type="password"
                    autocomplete="off"
                    name="outsidePwConfirm"
                    id="outsidePwConfirm"
                    ng-model="model.confirm"
                    placeholder-translate-context="Placeholder"
                    placeholder-translate="Confirm password"
                    class="composer-options-input"
                    required>
            </div>
        </div>
        <div class="clearfix">
            <label
                for="outsidePwHint"
                class="text-muted col-1-3">
                <span translate translate-context="Title">Password Hint</span> (<em translate translate-context="Info">Optional</em>)
            </label>
            <div class="col-2-3">
                <input
                    type="text"
                    class="composer-options-input"
                    autocomplete="off"
                    name="outsidePwHint"
                    id="outsidePwHint"
                    ng-model="model.hint"
                    placeholder-translate-context="Placeholder"
                    placeholder-translate="Hint">
            </div>
        </div>
    </div>
    <p class="clear alert alert-warning" translate translate-context="Info">Encrypted messages to non-ProtonMail recipients will expire in 28 days unless a shorter expiration time is set.</p>
    <footer class="text-right">
        <button
            type="button"
            class="pm_button pull-left mobileFull composer-options-btn-cancel composerEncrypt-btn-cancel"
            translate
            translate-context="Action">Cancel</button>
        <button
            type="submit"
            class="pm_button primary mobileFull composer-options-btn-submit composerEncrypt-btn-submit"
            ng-disabled="encryptForm.$invalid"
            translate
            translate-context="Action">Set</button>
    </footer>
</form>
